<template>
  <el-form v-bind="$attrs" ref="formRel">
    <el-form-item label="名称" prop="name" :rules="[{ required: true, message: '名称不能为空' }]">
      <el-input v-model="formData.name" placeholder="请输入数据标题，不超过50个字符" />
    </el-form-item>
    <el-form-item label="资源描述" prop="desc">
      <el-input
        v-model="formData.desc"
        type="textarea"
        :rows="1"
        autosize
        @blur="specialFormValidate('desc')"
        @keyup.enter.native="specialFormValidate('desc')"
        placeholder="请输入数据的描述信息，不超过200个字符"
      />
    </el-form-item>
    <el-form-item label="亮度">
      <el-slider
        class="progress"
        v-model="attr.brightness"
        :min="-150"
        :max="150"
        :step="1"
        @change="change('brightness')"
      />
      <el-input
        class="progress-input"
        v-model.number="attr.brightness"
        @blur="handle('brightness')"
        max="100"
        min="-50"
        @keyup.enter.native="handle('brightness')"
      />
      <span>%</span>
    </el-form-item>
    <el-form-item label="对比度">
      <el-slider
        class="progress"
        v-model="attr.saturation"
        :min="-50"
        :max="100"
        :step="1"
        @change="change('saturation')"
      />
      <el-input
        class="progress-input"
        v-model.number="attr.saturation"
        @blur="handle('saturation')"
        max="150"
        min="-150"
        @keyup.enter.native="handle('saturation')"
      />
      <span>%</span>
    </el-form-item>
    <el-form-item label="饱和度">
      <el-slider
        class="progress"
        v-model="attr.contrast"
        :min="-100"
        :max="100"
        :step="1"
        @change="change('contrast')"
      />
      <el-input
        class="progress-input"
        v-model.number="attr.contrast"
        @blur="handle('contrast')"
        max="100"
        min="-100"
        @keyup.enter.native="handle('contrast')"
      />
      <span>%</span>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { messageUtil } from '@jl/element-plus/utils';

defineOptions({
  name: '',
});

interface IProps {
  form: any;
}

const props = withDefaults(defineProps<IProps>(), {
  form: {},
});

const formRel = ref();

const formData = ref<any>({});
const attr = ref<any>({
  brightness: 100,
  saturation: 100,
  contrast: 100,
});
const rules = {
  brightness: { min: -150, max: 150 },
  saturation: { min: -50, max: 100 },
  contrast: { min: -100, max: 100 },
} as any;

onMounted(() => {
  init();
});

const emits = defineEmits(['formValidate']);

function init() {
  const { cimInstance } = window;
  formData.value = props.form;
  const attrs = cimInstance.api.getCurrentLayerConfig(formData.value.layerName);
  console.log(attrs);
  if (attrs) {
    setFormDataAttr({
      brightness: attrs.brightness * 100,
      saturation: attrs.saturation * 100,
      contrast: attrs.contrast * 100,
    });
  }
}

function setFormDataAttr(attrs: any) {
  Object.keys(attrs).forEach((key: string) => {
    attrs[key] = Number(attrs[key]);
  });
  attr.value = attrs;
}

function specialFormValidate(fieldName: string) {
  let valid = true;
  if (['desc'].includes(fieldName)) {
    if (formData.value[fieldName].length > 200) {
      valid = false;
    }
  }
  if (!valid) {
    messageUtil.warning('校验错误');
  }
  emits('formValidate', fieldName, valid);
}

function change(fieldName: string) {
  if (formData.attr) {
    formData.value.attr.brightness = attr.valu.brightness / 100;
    formData.value.attr.saturation = attr.valu.saturation / 100;
    formData.value.attr.contrast = attr.valu.contrast / 100;
  } else {
    formData.value.attr = {
      brightness: attr.value.brightness / 100,
      saturation: attr.value.saturation / 100,
      contrast: attr.value.contrast / 100,
    };
  }
  emits('formValidate', fieldName, true);
}

function handle(fieldName = '') {
  let valid = true;
  const value = attr.value[fieldName];
  valid = validate(value, rules[fieldName].min, rules[fieldName].max);
  if (!valid) return;
  change(fieldName);
}

function validate(num: any, min: number, max: number) {
  if (num === '' || isNaN(num)) {
    messageUtil.warning('校验错误');
    return false;
  }
  num = Number(num);
  if (Number.isInteger(num)) {
    if (num >= min && max >= num) {
      return true;
    }
    messageUtil.warning('校验错误');
    return false;
  }
  messageUtil.warning('校验错误');
  return false;
}
</script>

<style lang="less" scoped>
.progress {
  width: 213px;
}
.progress-input {
  width: 48px;
  margin-left: 8px;
}
span {
  margin-left: 2px;
}
</style>
